import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { AtList, AtListItem, AtSegmentedControl } from "taro-ui"
import './xiangmufenxi.css'
import reactMixin from 'react-mixin';
import app from '../../../../main.js';
import echarts from '../../resources/ec-canvas/echarts'
import blue from '../../../../img/blue.png'
import green from '../../../../img/green.png'

export default class Xiangmufenxi extends Component {

  static defaultProps = {
    data: []
}

config = {  
  navigationBarTitleText: '项目分析',
  usingComponents: {
      'ec-canvas': '../../resources/ec-canvas/ec-canvas', // 引入第三方组件ec-canvans
    }
}
  constructor(props) {
    super(...arguments,props);
    // this.state = this.getData();
    this.state = {
      height: '',
      width: '',
	  canvas: '',
	  img1:blue,
	  img2:green,
      ec: {
        onInit: this.initChart
      },
      ec1: {
        onInit: this.initChart1
      },
      ec2: {
        onInit: this.initChart2
      },
      ec3: {
        onInit: this.initChart3.bind(this)
      },
      ec4: {
        onInit: this.initChart4
      },
      ec5: {
        onInit: this.initChart5.bind(this)
      },
      GRage:[],
      GRbefore:[],
      GRafter:[],
      XMage:[],
      XMbefore:[],
      XMafter:[],
    }
  }

    changeBule(){ }

    changeGreen(){ }

    initChart (canvas, width, height) {

    let arrA = [];
    let arrB = [];
    let data = {
        projectId:1,
    }
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    app.get('web/project/projectAnalyze', data, function(res){
        for(let val of res.data.ageDistribution.M_ageAgv ){
            arrA.push(val.x)
            arrB.push(val.y)
        }
        canvas.setChart(chart);
  
        var option = {
      
          textStyle:{
            color:'#000000'
          },
          color: ["#37A2DA", "#67E0E3", "#9FE6B8"],         
          grid: {
            containLabel: true
          },
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: arrA,
            axisLine:{
              lineStyle:{
                color: '#cccccc'
              }  
            },
          },
          yAxis: {
            x: 'center',
            // min:10,
            type: 'value',
            axisLine:{
              lineStyle:{
                color: 'white'
              }  
            },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
            // show: false
          },

          series: [{
            name: 'DS',
            type: 'scatter',
          //   smooth: true,
            data: arrB
          }]
        };
      
        setTimeout(res=>{
            chart.setOption(option);
        },500)
    })
    

    
    
    

    return chart;
  }

    initChart1 (canvas, width, height) {

    let arrA = [];
    let arrB = [];
    let arrX = [];
    let data = {
        projectId:1,
    }
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    app.get('web/project/projectAnalyze', data, function(res){
        for(let i = 0; i<res.data.visionDistribution.dc.length; i++){
            arrA.push(res.data.visionDistribution.dc[i].dc)
            arrB.push(res.data.visionDistribution.ds[i].ds)
            arrX.push(res.data.visionDistribution.ds[i].x)
        }
        canvas.setChart(chart);
      
        var option = {
      
          textStyle:{
            color:'#000000'
          },
          color: ["#37A2DA", "#67E0E3", "#9FE6B8"], 
          
          // legend: {
          //   data: ['DS', 'DC'],
          //   bottom: 20,
          //   left: '50%',
          //   backgroundColor: 'red',
          //   z: 100
            // },
      
          grid: {
            containLabel: true
          },
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: arrX,
            axisLine:{
              lineStyle:{
                color: '#cccccc'
              }  
            },
          },
          yAxis: {
            x: 'center',
            min:10,
            type: 'value',
            axisLine:{
              lineStyle:{
                color: 'white'
              }  
            },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
            // show: false
          },
          series: [{
            name: 'DS',
            type: 'scatter',
            // smooth: true,
            data: arrA
          },{
            name: 'DC',
            type: 'scatter',
            // smooth: true,
            data: arrB
          }]
        };
      
        setTimeout(res=>{
            chart.setOption(option);
        },500)
    })

    return chart;
  }
  
    initChart2 (canvas, width, height) {

    let arrA = [];
    let data = {
        projectId:1,
    }
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    app.get('web/project/projectAnalyze', data, function(res){
        arrA = res.data.cavDistribution.M_vision
        canvas.setChart(chart);
  
        var option = {
      
          textStyle:{
            color:'#000000'
          },
          color: ["#37A2DA", "#67E0E3", "#9FE6B8"],         
          grid: {
            containLabel: true
          },
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: arrA,
            axisLine:{
              lineStyle:{
                color: '#cccccc'
              }  
            },
          },
          yAxis: {
            x: 'center',
            min:10,
            type: 'value',
            axisLine:{
              lineStyle:{
                color: 'white'
              }  
            },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
            // show: false
          },
          series: [{
            name: 'DC',
            type: 'scatter',
            // smooth: true,
            data: arrA
      }]
        };
      
        setTimeout(res=>{
            chart.setOption(option);
        },500)
    })
    return chart;
  }

    initChart3 (canvas, width, height) {

    let arrA = [];
    let arrB = [];
    let data = {
        projectId:1,
        doctorId:1
    }
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    app.get('web/project/personalAnalyze', data, function(res){
        for(let val of res.data.ageDistribution.M_ageAgv){
            arrA.push(val.x)
            arrB.push(val.y)
        }
        canvas.setChart(chart);
  
        var option = {
      
          textStyle:{
            color:'#000000'
          },
          color: ["#37A2DA", "#67E0E3", "#9FE6B8"],         
          grid: {
            containLabel: true
          },
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: arrA,
            axisLine:{
              lineStyle:{
                color: '#cccccc'
              }  
            },
          },
          yAxis: {
            x: 'center',
            // min:10,
            type: 'value',
            axisLine:{
              lineStyle:{
                color: 'white'
              }  
            },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
            // show: false
          },
          series: [{
            name: 'DS',
            type: 'scatter',
            // smooth: true,
            data: arrB
      }]
        };
      
        setTimeout(res=>{
            chart.setOption(option);
        },500)
    })
    

    return chart;
  }

    initChart4 (canvas, width, height) {

    let arrA = [];
    let arrB = [];
    let arrX = [];
    let data = {
        projectId:1,
        doctorId:1
    }
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    app.get('web/project/personalAnalyze', data, function(res){
        for(let i = 0; i<res.data.visionDistribution.dc.length; i++){
            arrA.push(res.data.visionDistribution.dc[i].dc)
            arrB.push(res.data.visionDistribution.ds[i].ds)
            arrX.push(res.data.visionDistribution.ds[i].x)
        }
        canvas.setChart(chart);
  
        var option = {
      
          textStyle:{
            color:'#000000'
          },
          color: ["#37A2DA", "#67E0E3", "#9FE6B8"], 
          
          // legend: {
          //   data: ['DS', 'DC'],
          //   bottom: 20,
          //   left: '50%',
          //   backgroundColor: 'red',
          //   z: 100
            // },
      
          grid: {
            containLabel: true
          },
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: arrX,
            axisLine:{
              lineStyle:{
                color: '#cccccc'
              }  
            },
          },
          yAxis: {
            x: 'center',
            min:10,
            type: 'value',
            axisLine:{
              lineStyle:{
                color: 'white'
              }  
            },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
            // show: false
          },
          series: [{
            name: 'DS',
            type: 'scatter',
            // smooth: true,
            data: arrA
          },{
            name: 'DC',
            type: 'scatter',
            // smooth: true,
            data: arrB
          }]
        };
      
        setTimeout(res=>{
            chart.setOption(option);
        },500)
    })

    
    
    
    return chart;
  }
  
    initChart5 (canvas, width, height) {

    let arrA = [];
    let data = {
        projectId:1,
        doctorId:1
    }
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    app.get('web/project/personalAnalyze', data, function(res){
         arrA = res.data.cavDistribution.M_vision
         canvas.setChart(chart);
  
          var option = {
        
            textStyle:{
              color:'#000000'
            },
            color: ["#37A2DA", "#67E0E3", "#9FE6B8"],         
            grid: {
              containLabel: true
            },
            tooltip: {
              show: true,
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              // boundaryGap: false,
              data: arrA,
              axisLine:{
                lineStyle:{
                  color: '#cccccc'
                }  
              },
            },
            yAxis: {
              x: 'center',
              min:10,
              type: 'value',
              axisLine:{
                lineStyle:{
                  color: 'white'
                }  
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                }
              }
              // show: false
            },
            series: [{
              name: 'DC',
              type: 'scatter',
              // smooth: true,
              data: arrA
        }]
          };
        
          setTimeout(res=>{
              chart.setOption(option);
          },500)
    })

   
    

    return chart;
  }

  //get 个人数据
  getPersonal(){
    let me = this;
    let data = {
        projectId:1,
        doctorId:1
    }
    app.get('web/project/personalAnalyze', data, function(res){
        console.log(res)
        me.setState({
            GRage:res.data.ageDistribution,
            GRbefore:res.data.visionDistribution,
            GRafter:res.data.cavDistribution
        })
    })
  }

  //get 项目数据
  getProject(){
    let me = this;
    let data = {
        projectId:1,
    }
    app.get('web/project/projectAnalyze', data, function(res){
        // console.log(res)
        me.setState({
            XMage:res.data.ageDistribution,
            XMbefore:res.data.visionDistribution,
            XMafter:res.data.cavDistribution
        })
    })
  }


  componentWillMount() {
    this.getPersonal();
    this.getProject();
    this.setState({
      current:0
    })
  }

  handleClick(value) {
    this.setState({
      current: value
    })
  }

  medicalDetails = () => {
    app.redirectTo('../chakanbingli1/chakanbingli1');
  }

  render() {
    return (
      <View className='xiangmufenxi'>
        <AtSegmentedControl
          values={['项目分析', '个人分析']}
          onClick={this.handleClick.bind(this)}
          current={this.state.current}
        />
        {
          this.state.current === 0
            ? <View className='tab-content'>
              <View className='huanzhenianling'>患者年龄分布</View>
              <View className='huanzhenianling1'>
                <View className='shuzhi'>{this.state.XMage.minAges}</View>
                <View className='shuzhi'>{this.state.XMage.maxAges}</View>
                <View className='shuzhi'>{this.state.XMage.agesAgv}</View>
              </View>
              <View className='huanzhenianling2'>
                <View className='dengji'>最低</View>
                <View className='dengji1'>最高</View>
                <View className='dengji2'>平均</View>
              </View>
              <View className='MyCanvas'>
                <ec-canvas id='mychart-dom-area' canvas-id='mychart-area' ec={this.state.ec}></ec-canvas>
              </View>
              <View className='content'>
                <View className='huanzhenianling'>术前视力分布</View>
                <View className='huanzhenianling3'>
                  <View className='shuzhi1'><Text className='shilishuzhi'>{this.XMbefore.minVisionDS}</Text>/<Text className='shilishuzhi1'>{this.XMbefore.maxVisionDS}</Text></View>
                  <View className='shuzhi1'><Text className='shilishuzhi'>{this.XMbefore.agvVisionDS}</Text>/<Text className='shilishuzhi1'>{this.XMbefore.minVisionDC}</Text></View>
                  <View className='shuzhi1'><Text className='shilishuzhi'>{this.XMbefore.maxVisionDC}</Text>/<Text className='shilishuzhi1'>{this.XMbefore.agvVisionDC}</Text></View>
                </View>
                <View className='huanzhenianling2'>
                  <View className='dengji'>最低</View>
                  <View className='dengji1'>最高</View>
                  <View className='dengji2'>平均</View>
                </View>
                <View className='MyCanvas'>
                <ec-canvas id='mychart-dom-area2' canvas-id='mychart-area2' ec={this.state.ec1}></ec-canvas>
              </View>
			  <View className='btnBox'>
					<View className='left'>
						<Image className='img1' src={this.state.img1} onClick={this.changeBule.bind(this)}></Image>
						<View className='text'> DS </View>
					</View>
					<View className='right'>
						<Image className='img2' src={this.state.img2} onClick={this.changeGreen.bind(this)}></Image>
						<View className='text'> DC </View>
					</View>
				</View>
            

              </View>
              <View className='content'>
                <View className='huanzhenianling'>术后一周裸眼最佳矫正视力</View>
                <View className='huanzhenianling1'>
                  <View className='shuzhi'>{this.state.XMafter.minCav}</View>
                  <View className='shuzhi'>{this.state.XMafter.maxCav}</View>
                  <View className='shuzhi'>{this.state.XMafter.avgCav}</View>
                </View>
                <View className='huanzhenianling2'>
                  <View className='dengji'>最低</View>
                  <View className='dengji1'>最高</View>
                  <View className='dengji2'>平均</View>
                </View>
                <View className='MyCanvas'>
                <ec-canvas id='mychart-dom-area' canvas-id='mychart-area' ec={this.state.ec2}></ec-canvas>
              </View>
              </View>
        </View>
            : null
        }
        {
          this.state.current === 1
            ? <View className='tab-content'>
              <View className='huanzhenianling'>患者年龄分布</View>
              <View className='huanzhenianling1'>
                <View className='shuzhi'>{this.state.GRage.minAges}</View>
                <View className='shuzhi'>{this.state.GRage.maxAges}</View>
                <View className='shuzhi'>{this.state.GRage.agesAgv}</View>
              </View>
              <View className='huanzhenianling2'>
                <View className='dengji'>最低</View>
                <View className='dengji1'>最高</View>
                <View className='dengji2'>平均</View>
              </View>
              <View className='MyCanvas'>
                <ec-canvas id='mychart-dom-area' canvas-id='mychart-area' ec={this.state.ec3}></ec-canvas>
              </View>
              <View className='content'>
                <View className='huanzhenianling'>术前视力分布</View>
                <View className='huanzhenianling3'>
                  <View className='shuzhi1'><Text className='shilishuzhi'>{this.GRbefore.minVisionDS}</Text>/<Text className='shilishuzhi1'>{this.GRbefore.maxVisionDS}</Text></View>
                  <View className='shuzhi1'><Text className='shilishuzhi'>{this.GRbefore.agvVisionDS}</Text>/<Text className='shilishuzhi1'>{this.GRbefore.minVisionDC}</Text></View>
                  <View className='shuzhi1'><Text className='shilishuzhi'>{this.GRbefore.maxVisionDC}</Text>/<Text className='shilishuzhi1'>{this.GRbefore.agvVisionDC}</Text></View>
                </View>
                <View className='huanzhenianling2'>
                  <View className='dengji'>最低</View>
                  <View className='dengji1'>最高</View>
                  <View className='dengji2'>平均</View>
                </View>
                <View className='MyCanvas'>
                <ec-canvas id='mychart-dom-area2' canvas-id='mychart-area2' ec={this.state.ec4}></ec-canvas>
              </View>
			  <View className='btnBox'>
					<View className='left'>
						<Image className='img1' src={this.state.img1} onClick={this.changeBule.bind(this)}></Image>
						<View className='text'> DS </View>
					</View>
					<View className='right'>
						<Image className='img2' src={this.state.img2} onClick={this.changeGreen.bind(this)}></Image>
						<View className='text'> DC </View>
					</View>
				</View>
            

              </View>
              <View className='content'>
                <View className='huanzhenianling'>术后一周裸眼最佳矫正视力</View>
                <View className='huanzhenianling1'>
                  <View className='shuzhi'>{this.state.GRafter.minCav}</View>
                  <View className='shuzhi'>{this.state.GRafter.maxCav}</View>
                  <View className='shuzhi'>{this.state.GRafter.avgCav}</View>
                </View>
                <View className='huanzhenianling2'>
                  <View className='dengji'>最低</View>
                  <View className='dengji1'>最高</View>
                  <View className='dengji2'>平均</View>
                </View>
                <View className='MyCanvas'>
                <ec-canvas id='mychart-dom-area' canvas-id='mychart-area' ec={this.state.ec5}></ec-canvas>
              </View>
              </View>
        </View>
            : null
        }

      </View>
    )
  }
}
// reactMixin.onClass(xiangmufenxi, myJs);
